<template>
  <a-tooltip placement="top" :mouse-enter-delay="0.5">
    <template slot="title">
      <span>筛选内容</span>
    </template>
    <div>
      <a-dropdown
        :visible="filterContentVisible"
        placement="bottomRight"
        :mouse-enter-delay="0.5"
        :disabled="disabled"
      >
        <div
          slot="overlay"
          style="
            background-color: #fff;
            box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
            width: 100%;
          "
        >
          <div class="ant-modal-header">
            <div class="ant-modal-title">
              筛选内容
            </div>
          </div>
          <div class="ant-modal-body">
            <a-tree
              :checked-keys="checkedClassKeys"
              checkable
              default-expand-all
              :height="300"
              :tree-data="filterClassData"
              @check="onCheckFilterClass"
            />
            <a-tree
              :checked-keys="checkedRelationKeys"
              checkable
              default-expand-all
              :height="300"
              :tree-data="filterRelationData"
              @check="onCheckFilterRelation"
            />
          </div>
          <div class="ant-modal-footer">
            <a-button size="small" @click="closeFilterContent">取消</a-button>
            <a-button
              type="primary"
              size="small"
              :loading="confirmLoading"
              @click="onFilterItems"
              >确定</a-button
            >
          </div>
        </div>
        <a-button type="link" style="padding: 0;" @click="openFilterContent">
          <a-icon-font class="tool-icon" type="iconshaixuan"></a-icon-font>
        </a-button>
      </a-dropdown>
    </div>
  </a-tooltip>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class FilterItems extends Vue {
  @Prop({ default: false }) disabled!: boolean
  @Prop({ default: false }) filterContentVisible!: boolean
  @Prop() checkedClassKeys: any
  @Prop() checkedRelationKeys: any
  @Prop() graphData: any

  private filterClassData: any = []
  private filterRelationData: any = []
  public confirmLoading: boolean = false //  loading status

  // 后端返回的是一个列表 遍历转换成树
  public traverseClassData(root: any, key: any) {
    const result: any = []
    if (root[key] !== undefined) {
      root[key].forEach((innerKey: any) => {
        result.push({
          title: innerKey,
          key: innerKey,
          children: this.traverseClassData(root, innerKey),
        })
      })
    }
    return result
  }

  mounted() {
    // this.initFilterItems()
  }

  public initFilterItems() {
    this.filterClassData = [
      {
        title: '实体类别',
        key: 'class',
        children: [],
      },
    ]
    this.filterClassData[0].children.push({
      title: 'Thing',
      key: 'Thing',
      children: this.traverseClassData(
        this.graphData.filterItems.class,
        'Thing'
      ),
    })
    this.filterRelationData = [
      {
        title: '实体关系',
        key: 'relation',
        children: this.traverseClassData(
          this.graphData.filterItems.relation,
          '_first_layer_'
        ),
      },
    ]
    // if (origin !== 'preview') {
    //   this.onCheckFilterClass(this.traversedClassKeys)
    //   this.onCheckFilterRelation(this.graphData.filterItems.relation)
    // }
  }

  private onCheckFilterClass(checkedKeys: any) {
    this.$emit('on-check-filter-class', checkedKeys)
  }

  private onCheckFilterRelation(checkedKeys: any) {
    this.$emit('on-check-filter-relation', checkedKeys)
  }

  private openFilterContent() {
    this.confirmLoading = false
    this.$emit('open-filter-content')
  }

  private closeFilterContent() {
    this.$emit('close-filter-content')
  }

  private onFilterItems() {
    this.confirmLoading = true
    this.$emit('on-filter-items')
  }
}
</script>

<style lang="less" scoped>
.tool-icon {
  cursor: pointer;
  font-size: 16px;
  height: 26px;
  margin: 0 2px;
  padding: 4px;
}

/deep/ .ant-btn-link {
  color: rgba(0, 0, 0, 0.65);

  &:hover {
    background-color: #f1f1f1;
    color: #5561ff !important;
  }
}

/deep/ .ant-modal-body {
  max-height: 300px;
  overflow-y: scroll;
}

.btn-select {
  background-color: rgba(105, 115, 255, 0.1);
  color: #6973ff;
}
</style>
